<template>
    <!-- 导航栏 -->
    <van-nav-bar :title="product.name" left-arrow @click-left="back" @click-right="ShowShare = true" fixed>
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
    </van-nav-bar>

    <!-- 分享面板 
          @select="share"触发事件
    -->
    <van-share-sheet v-model:show="ShowShare" title="立即分享给好友" :options="options" @select="share" />

    <!-- 轮播图 -->
    <div class="aui-m-slider">
        <van-swipe lazy-render>
            <van-swipe-item v-for="(item, index) in product.thumbs_cdn" :key="item">
                <img :src='item' />
            </van-swipe-item>
        </van-swipe>
    </div>

    <!-- 输出商品详情 -->
    <div class="detailbox">
        <h4>{{product.name}}</h4>
        <!-- 价格 -->
        <div class="price" v-if="product.level">
            <em>￥</em>{{product.level}}
            <span>￥{{product.price}}</span>
            <div class="stock">库存：{{product.stock}}件</div>
        </div>

        <div class="price" v-else>
            <em>￥</em>{{product.price}}
            <div class="stock">库存：{{product.stock}}件</div>
        </div>
    </div>

    <div class="clear"></div>
    <div class="h54"></div>
    <!--动作栏-->
    <div class="detailbox_2">
        <van-tabs v-model:active="tabs">
            <!-- 产品参数： -->
            <van-tab title="产品参数">
                <p class="tit">产品参数：</p>
                <div v-html="product.content"></div>
            </van-tab>
            <!-- 商品评价 -->
            <van-tab title="商品评价">
                <div class="gwcbox">
                    <div class="gwclist">
                        <div class="shop-cart-listbox1">


                            <div class="shop-cart-box2">
                                <span class="shop-cart-ltext1" v-if="!rate">该商品暂无评分</span>
                                <span class="shop-cart-ltext1" v-if="rate">商品评分:{{rate}}分</span>
                                <van-rate v-model="rate" readonly allow-half v-if="rate" />

                            </div>


                            <div class="index-goods" v-for="item in list">
                                <div v-if="item.rate">
                                    <span class="index-goods-img"><img :src="product.cover_cdn"></span>
                                    <div class="index-goods-textbox">
                                        <span class="index-goods-text1">{{item.remark}}</span>
                                        <van-rate v-model="item.rate" readonly allow-half />
                                        <div class="index-goods-text2"><span class="priceJs">来自{{address}}的客户</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>

    <div class="clear"></div>
    <div class="h54"></div>

    <!-- 底部 动作栏-->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot @click="Call" />
        <van-action-bar-icon v-if="total > 0" icon="cart-o" text="购物车" :badge="total" @click="ToCart" />

        <van-action-bar-icon v-else icon="cart-o" dot text="购物车" @click="ToCart" />

        <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
        <van-action-bar-button type="warning" text="加入购物车" @click="AddCart" />
        <van-action-bar-button type="danger" text="立即购买" @click="Addconfirm" />
    </van-action-bar>

</template>

<script>
    export default {
        name: 'ProductInfo',

        // 钩子拿传过来的商品id
        created() {
            this.proid = this.$route.query ? this.$route.query.proid : 0

            this.ProductData()
            this.comments()
        },

        data() {
            return {
                proid: 0,
                // 拿到的是对象
                LoginUser: this.$cookies.get('LoginUser'),
                product: {},
                ShowShare: false,
                contact: '', //电话
                rate: 0, //商品评分
                tabs: 0,
                total: 0, //数量
                list: [],
                address: 0,


                // 分享数据
                options: [
                    [{
                            name: '微信',
                            icon: 'wechat'
                        },
                        {
                            name: '朋友圈',
                            icon: 'wechat-moments'
                        },
                        {
                            name: '微博',
                            icon: 'weibo'
                        },
                        {
                            name: 'QQ',
                            icon: 'qq'
                        },
                    ],
                    [{
                            name: '复制链接',
                            icon: 'link'
                        },
                        {
                            name: '分享海报',
                            icon: 'poster'
                        },
                        {
                            name: '二维码',
                            icon: 'qrcode'
                        },
                        {
                            name: '小程序码',
                            icon: 'weapp-qrcode'
                        },
                    ]
                ]

            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },

            //分享的方法
            share(option) {
                this.ShowShare = false

            },

            // 拨打客服电话
            Call() {
                // 提示
                this.$dialog.confirm({
                    title: '拨打电话',
                    message: '是否确认拨打电话'
                }).then(() => {
                    // js 的调用波打电话 this.contact 当前的客电话
                    location.href = `tel:${this.contact}`
                }).catch(() => {})
            },

            // 购物车
            ToCart() {
                this.$router.push('/product/cart/index')
            },

            async ProductData() {
                // 组装数据
                var data = {
                    proid: this.proid,
                }

                // 判断用户id 对象也不能为空(转json数据，且不能为空对象)
                // 如果登录就带上用户id
                if (this.LoginUser && JSON.stringify(this.LoginUser) != "{}") {
                    data.userid = this.LoginUser.id
                }
                //   console.log(data);
                // 详情页面，不需要登录，（也可以登录）
                var result = await this.$api.ProductInfo(data);

                // console.log(result.data);

                // 加入失败
                if (result.code == 0) {
                    // 提醒
                    this.$notify({
                        type: 'danger',
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            this.$router.go(-1)
                        }
                    })
                    return false
                }

                // 覆盖
                this.product = result.data.product
                this.contact = result.data.contact //电话
                this.total = result.data.total
                // console.log(this.product);
            },

            // 添加购物车
            async AddCart() {

                // 先判断用户是不是登录状态
                if (!this.LoginUser || JSON.stringify(this.LoginUser) == '{}') {
                    // 提示
                    this.$notify({
                        type: 'danger',
                        message: '请先登录',
                        duration: '1000',
                        onClose: () => {
                            // 登录跳转到登录界面
                            this.$router.push('/user/base/login')
                            return false
                        }
                    })
                    return false
                }

                // 有登录
                // 组装数据
                var data = {
                    userid: this.LoginUser.id,
                    proid: this.proid,
                    nums: 1
                }
                // 调接口
                var result = await this.$api.CartAdd(data)

                //判断
                if (result.code == 1) {
                    //更新购物车数量
                    this.ProductData()

                    // 提示信息
                    this.$dialog.confirm({
                        message: result.msg,
                    }).then(() => {
                        // 跳转到后台指定组件
                        this.$router.push(result.url)
                    }).catch(() => {})
                } else {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                    return false
                }
            },

            // 立即购买
            async Addconfirm() {
                // 判断用户是否登录
                if (!this.LoginUser || JSON.stringify(this.LoginUser) == "{}") {
                    // 提示
                    this.$notify({
                        type: 'danger',
                        message: '请先登录',
                        duration: '1000',
                        onClose: () => {
                            this.$router.push('/user/base/login')
                            return false
                        }
                    })
                    return false
                }
                // 组装数据
                var data = {
                    userid: this.LoginUser.id,
                    proid: this.proid,
                    nums: 1
                }
                // 返回id
                var result = await this.$api.CartBuy(data);
                // console.log(result.data);
                // return false


                if (!result.data) {
                    // 提示
                    this.$notify({
                        type: 'danger',
                        message: '购买失败',
                        duration: '1000',
                    })
                } else {

                    this.$router.push({
                        path: '/product/cart/confirm',
                        query: {
                            proid: result.data,
                        }
                    })
                    return false
                }

            },

            // 商品评论
            async comments() {
                // 组装数据
                var data = {
                    proid: this.proid,
                    userid: this.LoginUser['id'],
                }
                // 调接口
                var result = await this.$api.ProductComments(data);

                // console.log(result)
                // return false
                if (result) {
                    this.rate = result['0']
                    this.list = result['1']
                    this.address = result['2']
                }
                // console.log(this.rate);

            }

        },
    }
</script>

<style>
    .headerbox .header {
        z-index: 1;
    }

    .detailbox h4 {
        font-size: 18px;
    }

    .detailbox .price {
        font-size: 16px;
    }

    .price .stock {
        float: right;
        color: #b7b7bf;
        font-size: 12px;
    }

    .index-goods-textbox {
        margin-left: 112px;
    }

    .priceJs {
        font-size: 12px;
    }
</style>